import {Button} from 'antd';
import React,{useState,useEffect,useCallback,useReducer} from 'react'
import LifeHeader from "../../component/Header"
import Token from './Token';
import FootNav from '../../component/FootNav'
const initialState = {count:0}//定义仓库
//定义reducer
function reducer(state,action){
    switch(action.type){
        case "increment":
            return {count:state.count + 1}
        case "decrement":
            return{count:state.count - 1}
    }
}
function Life(){
    //通过useReducer中传入reducer和仓库解构出读取和操作state的方法
    const [state,dispatch] = useReducer(reducer,initialState)

    const [count,setCount] = useState(0)
    const [uname,setuname] = useState('李文博')
    const [todoList,setTodoList] = useState([])
    useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(999)
        },1000)
        return function(){
            clearTimeout(timer)
        }
    })
    useEffect(()=>{
        console.log(count)
    },[])
    function clickHandler(){
        setCount(count + 1)
    }
    function clickHandler2(data){
        setuname(data)
    }
    function submitHandler(value){
        setTodoList([...todoList,value])
    }
    const clickHandler3 = ()=>{
        setTodoList([])
    }
    // console.log(sessionStorage.getItem('token'));
    return (
        <div>
            <LifeHeader title="生活服务"/>
            <p>{state.count}</p>
            <p>{uname}</p>
            <p>{ !sessionStorage.getItem('token')?"暂无token":sessionStorage.getItem('token')}</p>
            {/* <Button type="primary" onClick={useCallback(clickHandler,[uname])}>+1</Button> */}
            <Button type="primary" onClick={()=>dispatch({type:"increment"})}>+1</Button>
            <Button type="primary" onClick={()=>dispatch({type:"decrement"})}>-1</Button>
            <Button type="primary" onClick={clickHandler2.bind(this,'解宇')}>更换姓名</Button>
            <Button type="primary" onClick={clickHandler3}>清除todoList</Button>
            <Token onSubmit={submitHandler}/>
            {
                todoList.map((ele,index)=>{
                    return <div key={index}>{ele}</div>
                })
            }
            <FootNav/>
        </div>
    )
}
export default Life